import React from 'react';
import { Form, Input, Modal } from 'antd';
import moment from 'moment';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const modal = ({
                 item = {},
                 onOk,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 modalType,
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return;
      }
      onOk(getFieldsValue());
    });
  };

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
    title: modalType ? '修改Regionnetwork' : '新建Regionnetwork',
    okText: modalType ? '修改' : '创建',
  };

  const formItems = [];
  if (modalType) {
    formItems.push(
      <Form.Item label="UUID" {...formItemLayout}>
        {getFieldDecorator('id', {
          initialValue: item.id,
        })(<Input disabled />)}
      </Form.Item>);
  }
  formItems.push(
    <Form.Item label="name" hasFeedback {...formItemLayout}>
      {getFieldDecorator('name', {
        initialValue: item.name,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="description" hasFeedback {...formItemLayout}>
      {getFieldDecorator('description', {
        initialValue: item.description,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input type="textarea" />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="adminStateUp" hasFeedback {...formItemLayout}>
      {getFieldDecorator('adminStateUp', {
        initialValue: item.adminStateUp,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="portSecurityEnabledprojectId" hasFeedback {...formItemLayout}>
      {getFieldDecorator('portSecurityEnabledprojectId', {
        initialValue: item.portSecurityEnabledprojectId,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="qosPolicyId" hasFeedback {...formItemLayout}>
      {getFieldDecorator('qosPolicyId', {
        initialValue: item.qosPolicyId,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="dnsDomain" hasFeedback {...formItemLayout}>
      {getFieldDecorator('dnsDomain', {
        initialValue: item.dnsDomain,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="routerExternal" hasFeedback {...formItemLayout}>
      {getFieldDecorator('routerExternal', {
        initialValue: item.routerExternal,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="regionType" hasFeedback {...formItemLayout}>
      {getFieldDecorator('regionType', {
        initialValue: item.regionType,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);
  formItems.push(
    <Form.Item label="regionId" hasFeedback {...formItemLayout}>
      {getFieldDecorator('regionId', {
        initialValue: item.regionId,
        rules: [
          {
            required: true,
          },
        ],
      })(<Input />)}
    </Form.Item>);

  return (
    <Modal

      {...modalOpts}
    >
      <Form layout="horizontal">
        {formItems}
      </Form>
    </Modal>
  );
};

export default Form.create()(modal);
